<template>
  <!-- 单曲 -->
  <div id="single">
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              offset="5"
              @load="onLoad">
      <van-cell-group>
        <van-cell v-for="(song, index) in resultSongList"
                  :key="index"
                  :title="song.name"
                  @click="handleClick(song)">
          <template #label>
            <span v-for="(ar, idx) in song.ar"
                  :key="idx">{{ ar.name }}
              <span v-if="song.ar.length > 1 && idx < song.ar.length - 1">
                /
              </span>
            </span>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getSearch } from '@/api/search'
import { EventBus } from '../../../../currency'
export default {
  name: 'single',
  props: {
    rowText: String,
  },
  data() {
    return {
      resultSongList: [],
      loading: true,
      finished: false,
      limit: 20,
      type: 1,
    }
  },
  methods: {
    handleClick(row) {
      this.$store.commit('ClickAddInsertSong', row)
      EventBus.$emit('playMusic', '播放音乐')
    },
    onLoad() {
      this.loading = true
      this.limit = this.limit + 10
      this.initData(this.rowText, this.limit, this.type)
    },
    initData(row, limit, type) {
      this.rowText = row
      getSearch(row, limit, type).then((res) => {
        if (res.code != 200) {
          this.finished = true
        }
        this.loading = false
        this.resultSongList = res.result.songs
      })
    },
  },
  mounted() {
    this.initData(this.rowText, this.limit, this.type)
  },
}
</script>

<style>
</style>